<template>
    <div class="search">
        <input
            class="searchInp" 
            v-model="searchValue"
            @focus="handleFocus"
            @blur="handleBlur"
            @keyup.enter="handleSeqrch"
        />
        <button class="searchBut" @click="handleSeqrch">搜索</button>
        <div class="searchChunk" ref="search" @click="handleFocus">
            <div class="searchEliminate">
                <p class="leftFont">历史记录</p>
                <div class="rightIco iconfont" @click="handleClear">&#xe61e;</div>
            </div>
            <p class="historyNull" v-show="showList.length==0">暂无历史记录</p>
            <div class="historyChunk" v-for="item in showList" @click="handleQue(item)">
                <p>{{ item }}</p><div class="rightClear iconfont" @click="handleOne($event,item)">&#xe61e;</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted,computed,ref,watch } from 'vue';
import { sessionStore } from '@/sdk/search';

const search=ref(null)

let searchList=ref([])
let searchValue=ref(null)

// 搜索框历史记录数组接收数据
const handleProxy=()=>{
    console.log(sessionStore.get('searchList'))
    searchList.value= sessionStore.get('searchList') ? sessionStore.get('searchList') : []
}

// 搜索框回车确认搜索事件
const handleSeqrch=()=>{
    if(searchValue.value=='') return false
    if(searchList.value.indexOf(searchValue.value)!=-1){
        searchList.value.splice(searchList.value.indexOf(searchValue.value),1)
        searchList.value.unshift(searchValue.value)
    }else{
       searchList.value.unshift(searchValue.value) 
        // 后续回车后事件处理
        // ...... 
    }
    if(searchList.value.length>5){
        searchList.value=searchList.value.slice(0,5)
    }
}

// 通过计算属性实时劫持数据
const showList=computed(()=>{
    let dataFn={
        sliceFn:()=>searchList.value.slice(0,5)
    }
    let newArr=[]
    dataFn.sliceFn().forEach(item=>{
        if(newArr.indexOf(item)==-1){
            newArr.push(item)
        }
    })
    sessionStore.set('searchList',newArr)
    return newArr
})

// 点击历史记录数据回填到输入框
const handleQue=(val)=>{
    searchValue.value=val
    searchList.value.splice(searchList.value.indexOf(searchValue.value),1)
    searchList.value.unshift(searchValue.value)
}
// 点击清空所有历史数据
const handleClear=()=>{
    searchList.value=[]
}
// 点击清除单个历史数据
const handleOne=(e,val)=>{
    searchList.value.splice(searchList.value.indexOf(val),1)
    e.stopPropagation()
}

const handleFocus=()=>{
    setTimeout(()=>{
        search.value.style.display='block'
    },32)
}

const handleBlur=()=>{
    setTimeout(()=>{
        search.value.style.display='none'
    },100)
}

watch((newValue,oldValue)=>{
    handleProxy()
},{immediate:true})

</script>

<style lang="scss" scoped>
.search{
    width: 380px;
    height: 35px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    @include flex(row,flex-start,center);
    // border: 1px solid #000;
    .searchInp{
        width: 300px;
        height: 33px;
        border-radius: 0;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        border: 1px solid #000000;
        padding: 0;
        margin: 0;
    }
    .searchBut{
        margin: 0;
        margin-left: -1px;
        width: 80px;
        height: 35px;
        background-color: rgb(26, 26, 26);
        color: #fff;
        border-radius: 0;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
    }
    .searchChunk{
        display: none;
        width: 300px;
        position: absolute;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        box-shadow: 1px 3px 10px rgb(210, 210, 210),-1px 3px 6px rgba(255, 255, 255, 0.4);
        top:35px;
        .searchEliminate{
            width: 290px;
            height: 20px;
            padding: 5px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            .leftFont{
                font-size: 12px;
                line-height: 20px;
                color: skyblue;
                user-select: none;
            }
            .rightIco{
                color: skyblue;
                user-select: none;
                &:hover{
                    color: #000000;
                }
            }
        }
        .historyChunk{
            height: 30px;
            width: 290px;
            font-size: 15px;
            line-height: 30px;
            padding: 5px;
            user-select: none;
            border-top: 1px solid #67676757;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            .rightClear{
                color: skyblue;
                user-select: none;
                &:hover{
                    color: #000000;
                }
            }
        }
        .historyNull{
            height: 30px;
            width: 290px;
            font-size: 15px;
            line-height: 30px;
            color: skyblue;
            text-align: center;
            padding: 5px;
            user-select: none;
            border-top: 1px solid #67676757;
        }
    }
}
</style>
